<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- 
	PARAMETERS THAT THIS FRAGMENT NEEDS
		preview (boolean) - indicated whether or not the user can edit the data in the table
		helper (ModelTableHelper) - provides table rows and action methods when editing the table
 -->

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:cvis="http://mse10.ru.org/cvis">

	<h:outputStylesheet>
        a.no-decor>img {
        	border: none;
        }
    </h:outputStylesheet>
    
	<rich:collapsiblePanel header="Years Within a Company" style="margin-bottom: 10px; width: 100%;" id="panel" switchType="client">
		<div style="margin-bottom: 25px;">
			<a4j:commandLink rendered="#{not preview}" style="float: right;" styleClass="no-decor" action="#{helper.initNewRow}" 
				render="panel" execute="@this" oncomplete="#{rich:component('addPane')}.show()" value="Add New Entry" />
	    	<h:outputText style="float: left;"  rendered="#{helper.emptyModel}" value="No Entries Yet" />
		</div>
    	
		<rich:dataTable rendered="#{not helper.emptyModel}" value="#{helper.rows}" var="row" iterationStatusVar="it" id="table">
			<rich:column>
				<f:facet name="header">Year From</f:facet>
				<h:outputText value="#{row.modelObject.years.start}" >
					<f:convertDateTime pattern="yyyy" />
				</h:outputText>
			</rich:column>
			<rich:column>
				<f:facet name="header">Year To</f:facet>
				<h:outputText value="#{row.modelObject.years.end}" >
					<f:convertDateTime pattern="yyyy" />
				</h:outputText>
			</rich:column>
			<rich:column>
				<f:facet name="header">Company</f:facet>
				<h:outputText value="#{row.modelObject.company}" />
			</rich:column>	
			<rich:column rendered="#{not preview}">
				<a4j:commandLink styleClass="no-decor" execute="@this" render="panel" action="#{helper.remove}">
					<h:graphicImage value="/img/icons/delete.gif" alt="delete" />
					<a4j:param value="#{it.index}" assignTo="#{helper.currentIndex}" />
				</a4j:commandLink>
				<a4j:commandLink styleClass="no-decor" render="editGrid" execute="@this" oncomplete="#{rich:component('editPane')}.show()">
					<h:graphicImage value="/img/icons/edit.gif" alt="edit" />
					<a4j:param value="#{it.index}" assignTo="#{helper.currentIndex}" />
					<f:setPropertyActionListener target="#{helper.currentRow}" value="#{row}" />
				</a4j:commandLink>
			</rich:column>
		</rich:dataTable>

		<rich:popupPanel header="Add Within a Company Entry" id="addPane" domElementAttachment="parent" width="550" height="200">
			<h:panelGrid columns="2" id="addGrid">
				<h:outputText value="Date From" />
				<rich:calendar
					value="#{helper.currentRow.modelObject.years.start}"
					id="addStart" locale="en" popup="true" datePattern="yyyy" 
					showApplyButton="false" />

				<h:outputText value="Date To" />
				<rich:calendar
					value="#{helper.currentRow.modelObject.years.end}"
					id="addEdit" locale="en" popup="true" datePattern="yyyy"
					showApplyButton="false" />
				
				<h:outputText value="Company" />
				<h:inputText value="#{helper.currentRow.modelObject.company}" />				
			</h:panelGrid>
			<a4j:commandButton value="Save" action="#{helper.storeNewRow}" render="panel" execute="addPane"
				oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('addPane')}.hide();}" />
			<a4j:commandButton value="Cancel" onclick="#{rich:component('addPane')}.hide(); return false;" />
		</rich:popupPanel>

		<rich:popupPanel header="Edit Within a Company Entry" id="editPane" domElementAttachment="parent" width="550" height="200">
			<h:panelGrid columns="2" id="editGrid">
				<h:outputText value="Date From" />
				<rich:calendar
					value="#{helper.currentRow.modelObject.years.start}"
					id="editStart" locale="en" popup="true" datePattern="yyyy"
					showApplyButton="false" />

				<h:outputText value="Date To" />
				<rich:calendar
					value="#{helper.currentRow.modelObject.years.end}"
					id="editEdit" locale="en" popup="true" datePattern="yyyy"
					showApplyButton="false" />
				
				<h:outputText value="Company" />
				<h:inputText value="#{helper.currentRow.modelObject.company}" />				
			</h:panelGrid>
			<a4j:commandButton value="Store" action="#{helper.store}" render="panel" execute="editPane"
				oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editPane')}.hide();}" />
			<a4j:commandButton value="Cancel" onclick="#{rich:component('editPane')}.hide(); return false;" />
		</rich:popupPanel>

	</rich:collapsiblePanel>
</ui:composition>
